<template>
  <div class="login">
    <el-form class="login-form" ref="form" :model="user" :rules="formRules">
      <div class="title">
        登录
      </div>
      <!-- 配置Form表单验证：
      1. 必须给el-form组件绑定：model为表单数据对象
      2. 给需要验证的el-form-item绑定prop属性
        注意：prop属性需要指定表单对象中数据名称
      3.给el-form组件的rules属性配置验证规则
       -->
      <el-form-item class="form-item" prop="username">
        <el-input v-model="user.username" placeholder="请输入用户名"></el-input>
      </el-form-item>
      <el-form-item class="form-item" prop="password">
        <el-input v-model="user.password" placeholder="请输入密码" type="password"></el-input>
      </el-form-item>
      <div class="foot">
        <el-button type="primary" :loading="loginLoading" @click="login">登录</el-button>
      </div>
    </el-form>
  </div>
</template>
<script>

import { login } from '@/api/user'
export default {
  name: 'login',
  data() {
    return {
      user: {
        username: '13911111111',//手机号
        password: '246810',//密码
      },
      loginLoading: false,
      //表单验证规则
      formRules: {
          username: [
              {required: true,message: '用户名不能为空', trigger: 'change'},
              {min: 3,max: 11,message: '长度在3-11个字符', trigger: 'change'}
          ],
          password: [
              {required: true,message: '密码不能为空', trigger: 'change'},
              {pattern: /^\d{6}$/, message:'请输入正确格式密码', trigger: 'blur'}
          ]
      }
    }
  },
  
  methods: {
    //登录
    login() {
      // 获取表单数据
      const user = this.user
      // 表单验证
      // 验证通过  提交表单

      // 开启登陆中....
      this.loginLoading = true
      //对于代码的请求操作
      //1.接口请求可能需要重用
      //2.实际工作中，接口非常容易变动
      login(this.user).then( res => {
          // console.log(res)
          this.$message({
              message: '登录成功',
              type: 'success'
          })
          //登录成功
          this.loginLoading = false

          // 将接口放回的用户数据放到本地存储，方便应用
          // 本地存储只能存储字符串
          // 如果需要存储对象，数组类型的数据，则把他们转为JSON格式字符串进行村存储
          window.localStorage.setItem('user', JSON.stringify(res.data.data))
          //跳转到首页
          //this.$router.push('/')
          this.$router.push({
              name:'home'
          })
      }).catch( err => {
          console.log('登录失败',err)
          this.$message.error('登录失败，用户名或密码错误')
          //登录失败
          this.loginLoading = false
          //！！！！！1此处应是登录成功跳转首页，后面需删除该片段
          //跳转到首页
          //this.$router.push('/')
          this.$router.push({
              name:'home'
          })
      })
      
      // 处理后端响应结果
      //   成功：
      //   失败：
      // console.log(this.loginLoading)
    }
  }
}
</script>
<style scoped lang="less">
  .login {
    min-height: 100%;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #424969;
    background-size: cover;
    background-position: 40%;
    background-repeat: no-repeat;
    font-size: 12px;
    .login-form {
      margin: 100px auto;
      padding: 15px 30px;
      border-radius: 8px;
      background-color: #fff;
      .title {
        padding: 20px 0 40px 0;
        font-size: 17px;
        position: relative;
      }
      .title::before {
        content: "";
        position: absolute;
        top: 42px;
        left: 0;
        width: 33px;
        height: 4px;
        background-color: #424969;
      }
      .form-item {
        margin-bottom: 15px;
        font-size: 14px;
        .form-item i {
          font-size: 14px;
        }
      }
      .foot .el-button {
        margin-top: 20px;
        width: 100%;
        height: 40px;
        margin-bottom: 15px;
      }
      .foot .register {
        font-size: 11px;
        text-align: center;
        color: #999;
      }
      .foot .register span {
        color: #c1008d;
        cursor: pointer;
      }
      .back {
        text-align: center;
        padding: 20px 0;
      }
      .back .el-button {
        border-radius: 20px;
        color: #c1008d;
        border-color: #c1008d;
      }
      .el-input {
        width: 300px;
      }
    }
  }
</style>